

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/fluid.png">
  <link rel="icon" href="/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="一哑7">
  <meta name="keywords" content="">
  
    <meta name="description" content="APlayer   Wow, such a lovely HTML5 music player   Introduction APlayer is a lovely HTML5 music player. APlayer supports:  Media formats MP4 H.264 (AAC or MP3) WAVE PCM Ogg Theora Vorbis   Features">
<meta property="og:type" content="website">
<meta property="og:title" content="page.title">
<meta property="og:url" content="https://hydgod.gitee.io/aplayer/README.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="APlayer   Wow, such a lovely HTML5 music player   Introduction APlayer is a lovely HTML5 music player. APlayer supports:  Media formats MP4 H.264 (AAC or MP3) WAVE PCM Ogg Theora Vorbis   Features">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg">
<meta property="og:image" content="https://img.shields.io/npm/v/aplayer.svg?style=flat-square">
<meta property="og:image" content="https://img.shields.io/npm/l/aplayer.svg?style=flat-square">
<meta property="og:image" content="https://img.shields.io/npm/dt/aplayer.svg?style=flat-square">
<meta property="og:image" content="https://badge-size.herokuapp.com/MoePlayer/APlayer/master/dist/APlayer.min.js?compression=gzip&style=flat-square">
<meta property="og:image" content="https://img.shields.io/travis/MoePlayer/APlayer.svg?style=flat-square">
<meta property="og:image" content="https://img.shields.io/david/dev/MoePlayer/aplayer.svg?style=flat-square">
<meta property="og:image" content="https://img.shields.io/badge/$-donate-ff69b4.svg?style=flat-square">
<meta property="og:image" content="https://i.imgur.com/JDrJXCr.png">
<meta property="og:image" content="https://i.imgur.com/5qQYmfc.png">
<meta property="og:image" content="https://imgur.com/apG1uKf.png">
<meta property="og:image" content="https://opencollective.com/APlayer/backers.svg?width=890">
<meta property="og:image" content="https://opencollective.com/APlayer/contributors.svg?width=890">
<meta property="article:published_time" content="2022-10-17T06:47:41.806Z">
<meta property="article:modified_time" content="2022-10-17T06:45:18.674Z">
<meta property="article:author" content="一哑7">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>page.title - Hexo</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />





<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"hydgod.gitee.io","root":"/","version":"1.9.0","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>

  
<meta name="generator" content="Hexo 6.2.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 60vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>Taro</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="page.title"></span>
          
        </div>

        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      <div class="container nopadding-x-md">
        <div id="board"
          >
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                

<article class="page-content">
  <p align="center">
<img src="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg" srcset="/img/loading.gif" lazyload alt="ADPlayer" width="100">
</p>
<h1 align="center">APlayer</h1>

<blockquote>
<p>Wow, such a lovely HTML5 music player</p>
</blockquote>
<p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/aplayer"><img src="https://img.shields.io/npm/v/aplayer.svg?style=flat-square" srcset="/img/loading.gif" lazyload alt="npm"></a><br><a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/aplayer.svg?style=flat-square" srcset="/img/loading.gif" lazyload alt="npm"></a><br><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/aplayer"><img src="https://img.shields.io/npm/dt/aplayer.svg?style=flat-square" srcset="/img/loading.gif" lazyload alt="npm"></a><br><a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer/tree/master/dist"><img src="https://badge-size.herokuapp.com/MoePlayer/APlayer/master/dist/APlayer.min.js?compression=gzip&style=flat-square" srcset="/img/loading.gif" lazyload alt="size"></a><br><a target="_blank" rel="noopener" href="https://travis-ci.org/MoePlayer/APlayer"><img src="https://img.shields.io/travis/MoePlayer/APlayer.svg?style=flat-square" srcset="/img/loading.gif" lazyload alt="Travis"></a><br><a target="_blank" rel="noopener" href="https://david-dm.org/MoePlayer/APlayer#info=devDependencies"><img src="https://img.shields.io/david/dev/MoePlayer/aplayer.svg?style=flat-square" srcset="/img/loading.gif" lazyload alt="devDependency Status"></a><br><a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer#donate"><img src="https://img.shields.io/badge/$-donate-ff69b4.svg?style=flat-square" srcset="/img/loading.gif" lazyload alt="donate"></a></p>
<h2 id="Introduction"><a href="#Introduction" class="headerlink" title="Introduction"></a>Introduction</h2><p><img src="https://i.imgur.com/JDrJXCr.png" srcset="/img/loading.gif" lazyload alt="image"></p>
<p>APlayer is a lovely HTML5 music player.</p>
<p><strong>APlayer supports:</strong></p>
<ul>
<li>Media formats<ul>
<li>MP4 H.264 (AAC or MP3)</li>
<li>WAVE PCM</li>
<li>Ogg Theora Vorbis</li>
</ul>
</li>
<li>Features<ul>
<li>Playlist</li>
<li>Lyrics</li>
</ul>
</li>
</ul>
<p>Using APlayer on your project? <a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer/issues/79">Let me know!</a></p>
<p><strong><a target="_blank" rel="noopener" href="https://aplayer.js.org/">Docs</a></strong></p>
<p><strong><a target="_blank" rel="noopener" href="https://aplayer.js.org/#/zh-Hans/">中文文档</a></strong></p>
<h2 id="Join-the-Discussion"><a href="#Join-the-Discussion" class="headerlink" title="Join the Discussion"></a>Join the Discussion</h2><ul>
<li><a target="_blank" rel="noopener" href="https://t.me/adplayer">Telegram Group</a></li>
<li><a target="_blank" rel="noopener" href="https://shang.qq.com/wpa/qunwpa?idkey=bf22213ae0028a82e5adf3f286dfd4f01e0997dc9f1dcd8e831a0a85e799be17">QQ Group</a>: 415835947</li>
</ul>
<h2 id="Related-Projects"><a href="#Related-Projects" class="headerlink" title="Related Projects"></a>Related Projects</h2><h3 id="Plugins"><a href="#Plugins" class="headerlink" title="Plugins"></a>Plugins</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/zgq354/APlayer-Typecho-Plugin">APlayer-Typecho-Plugin</a>: Typecho</li>
<li><a target="_blank" rel="noopener" href="https://github.com/grzhan/hexo-tag-aplayer">hexo-tag-aplayer</a>: Hexo</li>
<li><a target="_blank" rel="noopener" href="https://github.com/liwanglin12/Hermit-X">Hermit-X(APlayer for WordPress)</a>: WordPress</li>
<li><a target="_blank" rel="noopener" href="https://github.com/kn007/APlayerHandle">APlayerHandle</a>: WordPress</li>
<li><a target="_blank" rel="noopener" href="https://github.com/fghrsh/APlayer_for_Z-BlogPHP">APlayer_for_Z-BlogPHP</a>: Z-BlogPHP</li>
<li><a target="_blank" rel="noopener" href="https://github.com/sabrinaluo/react-aplayer">react-aplayer</a>: React</li>
<li><a target="_blank" rel="noopener" href="https://github.com/SevenOutman/vue-aplayer">Vue-APlayer</a>: Vue</li>
<li><a target="_blank" rel="noopener" href="https://github.com/MoeFE/vue-aplayer">vue-aplayer</a>: Vue</li>
<li><a target="_blank" rel="noopener" href="https://github.com/Daryl-L/php-aplayer">php-aplayer</a>: PHP</li>
</ul>
<h3 id="Tooling"><a href="#Tooling" class="headerlink" title="Tooling"></a>Tooling</h3><ul>
<li><a target="_blank" rel="noopener" href="https://github.com/Mashiro-Sorata/APlayer-Controler">APlayer-Controler</a>: controling tool</li>
<li><a target="_blank" rel="noopener" href="https://github.com/metowolf/MetingJS">MetingJS</a>: work with Meting music API</li>
<li>Feel free to submit yours in <a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a></li>
</ul>
<h2 id="Who-use-APlayer"><a href="#Who-use-APlayer" class="headerlink" title="Who use APlayer?"></a>Who use APlayer?</h2><ul>
<li><a target="_blank" rel="noopener" href="https://www.bilibili.com/">bilibili</a>: 国内知名的视频弹幕网站</li>
<li><a target="_blank" rel="noopener" href="https://zh.wikipedia.org/wiki/CC98%E8%AE%BA%E5%9D%9B">浙江大学CC98论坛</a>: 浙江大学校网内规模最大的论坛，中国各大学中较活跃的BBS之一</li>
<li><a target="_blank" rel="noopener" href="http://jellyrue.com/">Jelly Rue</a>: Jelly Rue, an indie pop-rock band from Tartu.</li>
<li><a target="_blank" rel="noopener" href="http://www.opusopus.co/">Opus</a>: An artist-exploration data visualization application</li>
<li><a target="_blank" rel="noopener" href="http://www.chinaz.com/15year/index.html">站长之家</a>: 针对中文站点提供资讯、技术、资源、服务</li>
<li><a target="_blank" rel="noopener" href="https://www.lovelivesupport.com/">LLSupport</a>: This site provides a lot of information about LoveLive</li>
<li><a target="_blank" rel="noopener" href="https://www.lrcgc.com/diy">歌词千寻</a>: 每日更新的LRC歌词网站</li>
<li><a target="_blank" rel="noopener" href="http://i.oppsu.cn/">iSearch</a>: 一个提供 iTunes 搜索,试听,高清专辑封面获取,查看最新音乐动态等综合性平台</li>
<li><a target="_blank" rel="noopener" href="https://github.com/MoeFE/Lyric">LRC歌词编辑器</a>: 一款非常实用的在线LRC歌词编辑器</li>
<li><a target="_blank" rel="noopener" href="https://aerostatica.ru/">Аэростатика</a></li>
<li>Feel free to submit yours in <a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer/issues/79"><code>Let me know!</code></a></li>
</ul>
<h2 id="Current-Premium-Sponsors"><a href="#Current-Premium-Sponsors" class="headerlink" title="Current Premium Sponsors"></a>Current Premium Sponsors</h2><h3 id="Special-Sponsors"><a href="#Special-Sponsors" class="headerlink" title="Special Sponsors"></a>Special Sponsors</h3><a href="https://pear.hk/" target="_blank">
    <img width="222px" src="https://i.imgur.com/5qQYmfc.png" srcset="/img/loading.gif" lazyload>
</a>
<a href="https://console.upyun.com/register/?invite=BkLZ2Xqob" target="_blank">
    <img width="222px" src="https://imgur.com/apG1uKf.png" srcset="/img/loading.gif" lazyload>
</a>

<h3 id="OpenCollective-backers"><a href="#OpenCollective-backers" class="headerlink" title="OpenCollective backers"></a>OpenCollective backers</h3><p><img src="https://opencollective.com/APlayer/backers.svg?width=890" srcset="/img/loading.gif" lazyload></p>
<h2 id="Contributors"><a href="#Contributors" class="headerlink" title="Contributors"></a>Contributors</h2><p>This project exists thanks to all the people who contribute.</p>
<p><a target="_blank" rel="noopener" href="https://github.com/MoePlayer/APlayer/graphs/contributors"><img src="https://opencollective.com/APlayer/contributors.svg?width=890" srcset="/img/loading.gif" lazyload /></a></p>
<h2 id="Donate"><a href="#Donate" class="headerlink" title="Donate"></a>Donate</h2><p>APlayer is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.</p>
<h2 id="One-time-Donations"><a href="#One-time-Donations" class="headerlink" title="One-time Donations"></a>One-time Donations</h2><p>We accept donations through these channels:</p>
<ul>
<li><a target="_blank" rel="noopener" href="https://www.paypal.me/DIYgod">Paypal</a></li>
<li><a target="_blank" rel="noopener" href="https://i.imgur.com/aq6PtWa.png">WeChat Pay</a></li>
<li><a target="_blank" rel="noopener" href="https://i.imgur.com/wv1Pj2k.png">Alipay</a></li>
<li>Bitcoin: 13CwQLHzPYm2tewNMSJBeArbbRM5NSmCD1</li>
</ul>
<h2 id="Recurring-Pledges"><a href="#Recurring-Pledges" class="headerlink" title="Recurring Pledges"></a>Recurring Pledges</h2><p>Recurring pledges come with exclusive perks, e.g. having your name or your company logo listed in the APlayer GitHub repository and this website.</p>
<ul>
<li>Become a backer or sponsor via <a target="_blank" rel="noopener" href="https://opencollective.com/aplayer">OpenCollective</a></li>
<li>E-mail us: i#html.love</li>
</ul>
<h2 id="Author"><a href="#Author" class="headerlink" title="Author"></a>Author</h2><p><strong>APlayer</strong> © <a target="_blank" rel="noopener" href="https://github.com/DIYgod">DIYgod</a>, Released under the <a href="./LICENSE">MIT</a> License.<br><br>Authored and maintained by DIYgod with help from contributors (<a target="_blank" rel="noopener" href="https://github.com/DIYgod/APlayer/contributors">list</a>).</p>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://diygod.me/">Blog</a> · GitHub <a target="_blank" rel="noopener" href="https://github.com/DIYgod">@DIYgod</a> · Twitter <a target="_blank" rel="noopener" href="https://twitter.com/DIYgod">@DIYgod</a> · Telegram Channel <a target="_blank" rel="noopener" href="https://t.me/awesomeDIYgod">@awesomeDIYgod</a></p>
</blockquote>


  

</article>



              </div>
            </div>
          </div>
        </div>
      </div>
    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Taro</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>






  
    <script  src="/js/img-lazyload.js" ></script>
  




  <script  src="/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
